<template>
  <div class="container">
    <Modal v-model="showCpmodel" width="350">
      <template #header>
        <p style="color: black; text-align: left">
          <!-- <Icon type="ios-information-circle"></Icon> -->
          <span>活动优惠券</span>
        </p>
      </template>
      <template>
        <Scroll :on-reach-bottom="handleReachBottom">
          <Card
            dis-hover
            v-for="(item, index) in autoCoupList"
            :key="index"
            style="margin: 10px 15px"
          >
            <span
              v-if="item.couponType === 'PRICE'"
              class="fontsize_12 global_color"
              style="font-size: 15px"
              >￥<span class="price">{{ item.price | unitPrice }}</span></span
            >
            <span
              v-if="item.couponType === 'DISCOUNT'"
              class="fontsize_12 global_color"
              style="font-size: 15px"
              ><span class="price">{{ item.discount }}</span
              >折</span
            >
            <span class="describe" style="font-size: 15px; margin-left: 5px"
              >满{{ item.consumeThreshold }}元可用</span
            >
            <p style="font-size: 10px">
              使用范围：{{ useScope(item.scopeType, item.storeName) }}
            </p>
            <p style="font-size: 10px">有效期：{{ item.endTime }}</p>
          </Card>
        </Scroll>
      </template>
      <template #footer>
        <Button type="error" @click="showCpmodel = false">确定</Button>0
      </template>
    </Modal>

    <!-- 固定头部 -->
    <!-- <hover-search
      class="hover-search"
      :class="{ show: topSearchShow }"
    ></hover-search> -->
    <!-- 顶部广告 -->
    <!-- <FixedTopPage :data="topAdvert"></FixedTopPage> -->
    <!-- 头部 包括登录，我的订单等 -->
    <Affix :offset-top="0">
      <BaseHeader></BaseHeader>
    </Affix>
    <!-- <BaseHeader></BaseHeader> -->
    <!-- 商品分类 -->
    <cateNav
      :showAlways="true"
      v-if="showNav"
      :large="carouselLarge"
      :opacity="carouselOpacity"
    ></cateNav>
    <!-- 楼层装修部分 -->
    <model-form ref="modelForm" :data="modelForm"></model-form>
    <!-- 底部栏 -->
    <BaseFooter></BaseFooter>
    <!-- 侧边栏 -->
    <fixedBar
      class="fixed-bar"
      :class="{ 'show-fixed': topSearchShow }"
    ></fixedBar>
  </div>
</template>

<script>
import ModelForm from "@/components/indexDecorate/ModelForm";
import HoverSearch from "@/components/header/hoverSearch";
import fixedBar from "@/components/fixed/index";
import storage from "@/plugins/storage";
import { indexData, getAutoCoup } from "@/api/index.js";
import { seckillByDay } from "@/api/promotion";
export default {
  name: "Index",
  mounted() {
    // this.getIndexData();
    let that = this;
    window.onscroll = function () {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      if (top > 400) {
        that.topSearchShow = true;
      } else {
        that.topSearchShow = false;
      }
    };
    if (storage.getItem("userInfo")) {
      // this.getAutoCoup();
    }
  },
  data() {
    return {
      autoCoupList: [],
      showCpmodel: false,
      modelForm: { list: [] }, // 楼层装修数据
      topAdvert: {}, // 顶部广告
      showNav: false, // 是否展示分类栏
      topSearchShow: false, // 滚动后顶部搜索栏展示
      carouselLarge: false, // 不同轮播分类尺寸
      carouselOpacity: false, // 不同轮播分类样式
    };
  },
  props: {
    pageData: {
      type: null,
      default: "",
    },
  },
  // created(){

  // },
  methods: {
    // 优惠券可用范围
    useScope(type, storeName) {
      let shop = "平台";
      let goods = "全部商品";
      if (storeName !== "platform") shop = storeName;
      switch (type) {
        case "ALL":
          goods = "全部商品";
          break;
        case "PORTION_GOODS":
          goods = "部分商品";
          break;
        case "PORTION_GOODS_CATEGORY":
          goods = "部分分类商品";
          break;
      }
      return `${shop}${goods}可用`;
    },
    getAutoCoup() {
      let data = new Date();
      let datas = data.getDate();
      let hours = data.getHours();
      let flagCoup = storage.getItem("getTimes"); //缓存
      if (flagCoup && flagCoup != undefined && flagCoup != null) {
        //判断当前是否有缓存
        if (Number(datas) > Number(flagCoup)) {
          //判断缓存是否小于当前天数
          if (Number(hours) >= 6) {
            //超过或等于6时清楚缓存
            storage.setItem("getTimes", datas); //存储缓存
            // this.getcps();
          }
        }
      } else {
        // window.localStorage.setItem('getTimes',datas)//存储缓存
        // this.getcps();
      }
    },
    getcps() {
      console.log(123123);
      let data = new Date();
      let datas = data.getDate();
      getAutoCoup().then((res) => {
        //调用自动发券
        if (res.success) {
          this.autoCoupList.push(...res.result);
          let objs = {};
          this.autoCoupList = this.autoCoupList.reduce((cur, next) => {
            //对象去重
            if (next.id != undefined) {
              objs[next.id] ? "" : (objs[next.id] = true && cur.push(next));
            }
            return cur;
          }, []);
          if (this.autoCoupList != "" && this.autoCoupList.length > 0) {
            this.showCpmodel = true;
          }
          storage.setItem("getTimes", datas); //存储缓存
        }
      });
    },
    handleReachBottom() {},
    getIndexData() {
      if (this.pageData) {
        this.parsePageData(JSON.stringify(this.pageData));
      } else {
        // 获取首页装修数据
        indexData({ clientType: "PC" }).then(async (res) => {
          if (res.success && res.result) {
            this.parsePageData(res.result.pageData);
          }
        });
      }
    },

    async parsePageData(pageData) {
      let dataJson = JSON.parse(pageData);
      // 秒杀活动不是装修的数据，需要调用接口判断是否有秒杀商品
      // 轮播图根据不同轮播，样式不同
      for (let i = 0; i < dataJson.list.length; i++) {
        let type = dataJson.list[i].type;
        if (type === "carousel2") {
          this.carouselLarge = true;
        } else if (type === "carousel1") {
          this.carouselLarge = true;
          this.carouselOpacity = true;
        } else if (type === "seckill") {
          let seckill = await this.getListByDay();
          dataJson.list[i].options.list = seckill;
        }
      }
      this.modelForm = dataJson;
      storage.setItem("navList", dataJson.list[1]);
      // this.showNav = true;
      this.topAdvert = dataJson.list[0];
    },

    async getListByDay() {
      // 当天秒杀活动
      const res = await seckillByDay();
      if (res.success && res.result.length) {
        return res.result;
      } else {
        return [];
      }
    },
  },
  components: {
    ModelForm,
    HoverSearch,
    fixedBar,
  },
};
</script>

<style scoped lang="scss">
@import "../assets/styles/coupon.scss";
.container {
  @include sub_background_color($light_background_color);
}
</style>
<style>
.hover-search {
  width: 100%;
  height: 60px;
  transform: translateY(-200px);
  background-color: #fff;
  position: fixed;
  top: 0;
  z-index: 9999;
  box-shadow: 0 0 10px 2px rgb(90 90 90 / 60%);
  transition: 0.35s;
}
.show {
  transform: translateY(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  top: 0;
}
.fixed-bar {
  opacity: 0 !important;
  transform: translateY(-10px);
  transition: 0.35s;
  z-index: 999999;
  height: 0px !important;
  overflow: hidden;
}
.show-fixed {
  height: 100px !important;
  opacity: 1 !important;
  transform: translateY(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

/* 2K */
@media screen and (min-width: 2561px) and (max-width: 3840px) {
  /* 样式 */
  .fixed-bar {
    position: fixed;
    right: 900px;
    top: 500px;
  }
}

/* 1080p */
@media screen and (max-width: 2560px) {
  /* 样式 */
  .fixed-bar {
    position: fixed;
    right: 300px;
    top: 500px;
  }
}

@media screen and (max-width: 2025px) {
  /* 样式 */
  .fixed-bar {
    position: fixed;
    right: 150px;
    top: 300px;
  }
}
</style>
